<template>
  <div class="cell-wrap">
    <div class="cell-wrap-header">
      <div class="title">
        <slot :title="title" name="title">
          {{title}}
          <i class="iconfont icon-htbArrowright"></i>
        </slot>
      </div>
      <div class="status">
        <slot :status="statusText" name="statusText">
          {{statusText}}
        </slot>
      </div>
    </div>
    <div class="date">
      <slot>
        {{formatTime}}
      </slot>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: "cell",
    props: {
      title: {
        type: String
      },
      status: {
        type: Number
      },
      time: {
        type: String
      }
    },
    computed: {
      statusText () {
        // 1 待派单
        // 2 维修中（已派单）
        // 3 已维修
        let status = this.status;
        if(status == 1) {
          return "待派单"
        } else if(status == 2) {
          return "维修中"
        } else if(status == 3) {
          return "已维修"
        }
      },
      formatTime() {
        return moment(this.time).format("YYYY-MM-DD HH:mm:ss")
      }
    }
  }
</script>

<style scoped lang="scss">
  .cell-wrap {
    font-size: 12px;
    padding: 10px 15px;
    color: #333;
    border-bottom: 1px solid #f1f1f1;

    .cell-wrap-header {
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 16px;
      }

      .el-icon-arrow-right {
        color: #555;
        font-size: 14px;
      }
    }

    .date {
      margin-top: 4px;
      color: #555;
    }
  }
</style>
